import type { Meta, StoryObj } from '@storybook/react';
import { MultiLineTextWithTooltip } from '.';
import { Box } from '@mui/material';

// MultiLineTextWithTooltip 组件的 Meta 配置
const meta = {
  title: '组件/文本/多行文本',
  component: MultiLineTextWithTooltip,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <Box sx={{ width: '300px', p: 2, border: '1px solid #ddd' }}>
        <Story />
      </Box>
    ),
  ],
} satisfies Meta<typeof MultiLineTextWithTooltip>;

export default meta;
type Story = StoryObj<typeof meta>;

// 多行文本组件的故事
export const Default: Story = {
  name: '基础多行文本',
  args: {
    text: '这是一段非常长的多行文本内容示例，当文本超出指定的最大行数限制时，组件会自动截断显示并在用户悬停时通过 Tooltip 展示完整内容。这种方式特别适合于需要在有限空间内展示大量文本信息的场景，比如产品描述、用户评论或者长篇新闻摘要等。',
    variant: 'body1',
    maxLines: 3,
  },
};

export const WithinLimit: Story = {
  name: '未超出行数限制',
  args: {
    text: '这是一段较短的文本示例。\n内容恰好分成两行。\n不会触发tooltip。',
    variant: 'body1',
    maxLines: 3,
  },
};

export const CustomizedText: Story = {
  name: '高级定制多行文本',
  args: {
    text: '这是一个高级定制的多行文本示例，可以自定义行数限制、文字样式、颜色和粗细等，展示了组件的灵活配置能力。',
    variant: 'subtitle1',
    color: 'secondary',
    fontWeight: 'medium',
    maxLines: 2,
    sx: {
      border: '1px dashed #9c27b0',
      borderRadius: '4px',
    },
  },
};
